// 一、banner区域几个按钮上的事件

// 模拟后台拿的数据
let data = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]
// 获取父标签
let praButton = document.querySelector('.right-words .pra-btn');
let praButtonAs = '';
data.forEach(function(v,i){
    let sons = praButton.children;
    console.log(sons);
    praButtonAs += `
        <a id="btn" class="${i === 0?"on":""}" price="￥${v.price}" unit="${v.unitPrice}">${v.count}<img src="./images/select.png"></a>
    `
})
praButton.innerHTML += praButtonAs;

// 利用事件委派
document.querySelector('.right-words .pra-btn').addEventListener('click',function(e){
     
    // 判断点击的位置是否是添加的a标签
    if (e.target.className === 'on' ||e.target.className === ''){

        // 拿到这个父元素底下的所有的子元素
        let btn = document.querySelector('.right-words .pra-btn').children;
        for (let i = 1; i < btn.length; i++) {
            btn[i].classList.remove('on');  
        };

        e.target.classList.add('on');
        document.querySelector('.price .t-price').textContent = e.target.getAttribute('price');
        document.querySelector('.price .u-price').textContent = e.target.getAttribute('unit');
    };
})

// 主要内容选项卡
// 首先获取四个标题
let titles = document.querySelectorAll('.main-title a');
console.log(titles);
titles.forEach(function(v,i){
    let leftMains = document.querySelectorAll('main .left-main')
    v.addEventListener('click',function(){
        titles.forEach(function(v2,i2){
            v2.classList.remove('on');
            leftMains[i2].classList.remove('on'); 
        })
        this.classList.add('on');
        leftMains[i].classList.add('on');
    })

})

// banner粒子效果
window.onload = function() {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "50, 50, 50", 	//点颜色
        stroke: "100,100,100", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }
  
    //调用
    CanvasParticle(config);
  }